<template>
	<view class="content">
		<view class="title">
			你遇到了什么问题
		</view>
		<view class="choose">
			<view 
                class="btn1" 
                :class="{ 'active': selectedOption === 'Function' }" 
                @click="selectOption('Function')">功能异常</view>
			<view 
                class="btn1" 
                :class="{ 'active': selectedOption === 'product' }" 
                @click="selectOption('product')">产品建议</view>
			<view 
                class="btn1" 
                :class="{ 'active': selectedOption === 'other' }" 
                @click="selectOption('other')">其它反馈</view>
		</view>
		<view class="inputs">
			<u-input v-model="content" :type="type" :height="height" placeholder='请描述你的问题，我们将及时跟进解决' />
		</view>
		<view class="submit">
			<u-button type="primary" @click="submitFeedback">提交</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: '',
				type: 'textarea',
				height: 220,
				autoHeight: true,
				selectedOption: 'Function' ,// 用于存储当前选择的选项值
				account:'游客'
			}
		},
		onShow() {
			this.account = uni.getStorageSync('_id')||"游客";
		},
		methods: {
			selectOption(option) {
				this.selectedOption = option; 
					console.log('提交反馈，选项为:', this.selectedOption);
			},
		async	submitFeedback() {
				// 在这里使用this.selectedOption来访问当前选择的选项值，并执行提交反馈的操作
				console.log('提交反馈，选项为:', this.selectedOption);
				if(this.content){
					let data = await this.$http.feedbackHttp.addFeedback({
						account:this.account,
						type:this.selectedOption,
						content:this.content
					})
					console.log('返回的信息',data)
					if(data.code==200){
						uni.$u.toast("反馈成功")
						setTimeout(function() {
						  uni.switchTab({
						      url: '/pages/mine/mine'
						   })
						}, 1000)
					}
				}else{
						uni.$u.toast("请输入反馈内容")
				}
				
				// 还可以将this.selectedOption传递给需要的地方
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 32rpx 32rpx;
	}

	.title {
		height: 40rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #666666;
		line-height: 33rpx;
		font-style: normal;
		text-transform: none;
	}

	.choose {
		display: flex;
		width: 100%;
		justify-content: space-around;
		margin: 32rpx 0rpx;

		.btn1 {
			width: 208rpx;
			height: 74rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			border: 2rpx solid black;
			text-align: center;
			line-height: 74rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: #333333;
            cursor: pointer;
		}

        .btn1.active {
            border-color: #00A0F7; /* 修改选中时边框颜色 */
            color: #00A0F7; /* 修改选中时文字颜色 */
        }
	}

	.inputs {
		width: 686rpx;
		height: 224rpx;
		background: #F8F8F8;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin-bottom: 64rpx;
	}
	.submit{
		width: 686rpx;
		margin: 0 auto;
	}
</style>
